<template>
  <el-popover v-model="visibleModel" :placement="placement" class="default-margin">
    <p align="center">{{ title }}</p>
    <div align="center">
      <el-button size="mini" type="light" @click="cancelAction()">取消</el-button>
      <el-button type="primary" size="mini" @click="confirmAction()">确定</el-button>
    </div>
    <el-button slot="reference" :size="buttonSize" :type="buttonType" :icon="icon" :disabled="buttonDisabled">{{
      buttonTitle }}</el-button>
  </el-popover>
</template>

<script>
export default {
  name: 'ButtonPopover',
  props: {
    placement: {
      type: String,
      default: 'top'
    },
    title: {
      type: String,
      default: '确定？'
    },
    buttonTitle: {
      type: String,
      default: '保存'
    },
    buttonType: {
      type: String,
      default: 'primary'
    },
    buttonSize: {
      type: String,
      default: ''
    },
    buttonDisabled: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      visibleModel: false
    }
  },
  methods: {
    cancelAction() {
      this.$emit('click-cancel')
      this.visibleModel = false
    },
    confirmAction() {
      this.$emit('click-confirm')
      this.visibleModel = false
    }
  }
}
</script>
<style lang="scss" scoped>
.default-margin{
  margin-left: 10px;
}
</style>
